window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    var img1 = document.querySelector('.big>img');
    //1.当我们的鼠标经过preview_img 就要显示
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    //2.鼠标移动的时候,让黄色的盒子跟着鼠标走
    preview_img.addEventListener('mousemove', function (e) {
        //计算鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x + '----------' + y)
        //减去盒子高度300的一半就是我们最终mask的left，或者top
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        //4. 如果x的坐标小于0,就停止移动
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;//100
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        //5 如果y的坐标小于0,就停止移动
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        //让右边的实现放大镜的效果
        var bigImg = document.querySelector('.bigImg');
        var bigMax = bigImg.offsetWidth - big.offsetWidth;//298
        // console.log(bigImg.offsetWidth);
        // console.log(big.offsetWidth);
        console.log(bigMax);
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})